<template>
  <div id="adminList">
    <el-row :gutter="20">
      <el-col
        :xs="12"
        :sm="6"
        :md="3"
        :lg="3"
        :xl="3"
        v-for="(item, index) in dataList"
        :key="index"
        ><div class="grid-content bg-purple">
          <div class="box" @click="toBack(item.path)">
            <div class="icon1">
              <i :class="item.icon" :style="{ color: item.color }"></i>
            </div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "adminList",
  data() {
    return {
      dataList: [
        {
          icon: "el-icon-user",
          path: "/user/index",
          title: "用户管理",
          color: "rgb(105, 192, 255)",
        },
        {
          icon: "el-icon-setting",
          path: "/operation/setting",
          title: "系统设置",
          color: "rgb(149, 222, 100)",
        },
        {
          icon: "el-icon-goods",
          path: "/store/index",
          title: "商品",
          color: "rgb(255, 156, 110)",
        },
        {
          icon: "el-icon-s-order",
          path: "/order/index",
          title: "订单管理",
          color: "rgb(179, 127, 235)",
        },
        {
          icon: "el-icon-message",
          path: "/user/index",
          title: "短信配置",
          color: "rgb(255, 214, 102)",
        },
        {
          icon: "el-icon-notebook-1",
          path: "/content/articleManager",
          title: "文章管理",
          color: "rgb(92, 219, 211)",
        },
        {
          icon: "el-icon-s-finance",
          path: "/distribution/index",
          title: "分销管理",
          color: "rgb(255, 133, 192)",
        },
        {
          icon: "el-icon-s-ticket",
          path: "/marketing/coupon/list",
          title: "优惠卷",
          color: "rgb(255, 192, 105)",
        },
      ],
    };
  },
  methods: {
    toBack(path) {
      this.$router.push({ path });
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  cursor: pointer;
  .title {
    padding-top: 8px;
    font-size: 12px;
  }
}
.box > div {
  display: flex;
  justify-content: center;
}
.icon1 {
  i {
    font-size: 30px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #fff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 20px;
}
</style>